<template>
    <div>
    <hr>
        <span class="x-icon-outline"><x-icon type="ios-ionic-outline"></x-icon></span>
        <x-icon type="ios-arrow-back"></x-icon>
        <x-icon type="ios-arrow-forward"></x-icon>
        <x-icon type="ios-arrow-up"></x-icon>
        <x-icon type="ios-arrow-right"></x-icon>
        <x-icon type="ios-arrow-down"></x-icon>
        <x-icon type="ios-arrow-left"></x-icon>
        <x-icon type="ios-arrow-thin-up"></x-icon>
        <x-icon type="ios-arrow-thin-right"></x-icon>
        <x-icon type="ios-arrow-thin-down"></x-icon>
        <x-icon type="ios-arrow-thin-left"></x-icon>
        <x-icon type="ios-circle-filled"></x-icon>
        <x-icon type="ios-circle-outline"></x-icon>
        <x-icon type="ios-checkmark-empty"></x-icon>
        <x-icon type="ios-checkmark-outline"></x-icon>
        <x-icon type="ios-checkmark"></x-icon>
        <x-icon type="ios-plus-empty"></x-icon>
        <x-icon type="ios-plus-outline"></x-icon>
        <x-icon type="ios-plus"></x-icon>
        <x-icon type="ios-close-empty"></x-icon>
        <x-icon type="ios-close-outline"></x-icon>
        <x-icon type="ios-close"></x-icon>
        <x-icon type="ios-minus-empty"></x-icon>
        <x-icon type="ios-minus-outline"></x-icon>
        <x-icon type="ios-minus"></x-icon>
        <x-icon type="ios-information-empty"></x-icon>
        <x-icon type="ios-information-outline"></x-icon>
        <x-icon type="ios-information"></x-icon>
        <x-icon type="ios-help-empty"></x-icon>
        <x-icon type="ios-help-outline"></x-icon>
        <x-icon type="ios-help"></x-icon>
        <x-icon type="ios-search"></x-icon>
        <x-icon type="ios-search-strong"></x-icon>
        <x-icon type="ios-star"></x-icon>
        <x-icon type="ios-star-half"></x-icon>
        <x-icon type="ios-star-outline"></x-icon>
        <x-icon type="ios-heart"></x-icon>
        <x-icon type="ios-heart-outline"></x-icon>
    </div>
</template>
<script>
// type:类型，
// size:字体大小
export default {
    name : 'x-icon'
}
</script>
<style lang="less" scoped>
// svg 
// 颜色 ： fill
// 大小 ： width, height

    .x-icon-outline svg{
        fill : green;
        width:100px;
        height: 100px;
    }
</style>


